<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <link rel="stylesheet" href="preview/css/swiper.css"/>
    <script src="dragStatic/js/jquery-3.2.1.min.js"></script>
    <script src="preview/js/rem.js"></script>
    <script src="preview/js/swiper.min.js"></script>
    <title>拼接</title>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing: border-box;
        }
        body{
            /*background-image: url(preview/img/bg.png);*/
            /*overflow: hidden;*/
            font-size:0.16rem;
            color:#fff;
        }
        .swiper-container-screen {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            position: relative;
        }
        iframe{position:absolute;
            cursor: pointer;
            /*border:1px solid red;*/
        }
    </style>
</head>
<body>
<div class="swiper-container swiper-container-screen">
    <div class="swiper-wrapper">
        <!--<div class="swiper-slide">-->

        <!--</div>-->
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <!--<div class="swiper-button-next" style="top:40%;right:0;width: 60px;height: 122px;margin-top: -22px;background-image:url(img/r_arrow.png);"></div>-->
    <!--<div class="swiper-button-prev" style="top:40%;left:0;width: 60px;height: 122px;margin-top: -22px; background-image:url(img/l_arrow.png);"></div>-->
</div>
</body>
<script type="text/javascript">
    var timeSpace=5000;
    window.onload = function(){
        $.ajax({
            type: "get",
            url: "./preview.json",
            dataType: "json",
            data: {},
            success: function (data) {
                /////rem自适应
                page_init(100,data.canvasSize.width,'拼接');
                window.onresize = function(){
                    page_init(100,data.canvasSize.width,'拼接');
                };
                $('body').css({width:data.canvasSize.width/100+"rem",height:data.canvasSize.height/100+"rem",backgroundImage:"url("+data.backgroundImg.img+")",backgroundSize:"100% 100%"});
                for (var i = 0; i < data.screenInfo.length; i++) {////循环屏数
                    var iframeStr='';////每次循环定义放每个模块iframe的空字符串
                    var attrArr=data.screenInfo[i].attribute;
                    for (var j = 0; j < attrArr.length; j++) {////循环渲染每屏的每个模块
                        iframeStr+='<iframe src="./'+attrArr[j].name+'.html" frameborder="0" scrolling="no" id="'+attrArr[j].name+'" style="left:'+attrArr[j].left+';top:'+attrArr[j].top+';width:'+attrArr[j].width+';height:'+attrArr[j].height+'"></iframe>';
                    }
                    $('.swiper-wrapper').append('<div class="swiper-slide">'+iframeStr+'</div>');
                }
//                if (swiper && swiper.destroy) {
//                    swiper.destroy(true, false);
//                    //console.log('被销毁了');
//                }
                /////渲染完数据实例化swiper
                var swiper = new Swiper('.swiper-container-screen', {
//                    autoplay: {
//                        delay: timeSpace,
////                        stopOnLastSlide: false,
//                        disableOnInteraction: true,////用户手动操作之后自动播放不会停止
//                     },
//                    loop : true,
                    pagination: {
                        el: '.swiper-pagination',
                        type: 'fraction',
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                });
            }
        });
    }
</script>
</html>